<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select</title>
    <script src="https://minio.moxiaoli.cn/files/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="../css/select.css">
</head>
<body>
<div id="box">
    <div id="select" onclick="showOption()">
        <label for="storage">
            <input id="storage" type="text" placeholder="请选择" readonly="readonly"/>
        </label>
        <span>
            <svg class="s-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg>
        </span>
    </div>
    <ul id="option">
<!--        <li>本地搭建的MinIO</li>-->
<!--        <li>阿里云OSS</li>-->
<!--        <li>腾讯云COS</li>-->
    </ul>
    <script>
        let flag = false;
        let storageList = [];
        function getStorageList() {
            let storage = document.getElementById('option');
            let select = document.getElementById('select');
            let input = select.getElementsByTagName('input')[0];
            axios.get('http://localhost:8000/storage/list').then(res => {
                const {data} = res.data;
                // 清空下拉框
                // storage.innerHTML = '';
                // 获取下拉框中的输入框的数据
                input.value = data[0].storageName;
                select.style.backgroundImage = 'url(' + data[0].icon + ')';
                // 生成下拉框中的选项
                storageList = data;
                for (let i = 0; i < data.length; i++) {
                    let option = document.createElement('li');
                    option.value = data[i].storage;
                    option.innerText = data[i].storageName;
                    option.onclick = function () {
                        input.value = option.innerText;
                        // 方法一
                        // let items = storage.getElementsByTagName('li');
                        // for (let j = 0; j < items.length; j++) {
                        //     if(items[j].innerText !== option.innerText){
                        //         items[j].style.backgroundColor = '#fff';
                        //     }else{
                        //         items[j].style.backgroundColor = '#ff0000';
                        //     }
                        // }
                        // 方法二
                        Array.from(storage.getElementsByTagName('li')).forEach(function (item) {
                            if (item.innerText === option.innerText) {
                                item.classList.add('background-mask');
                            } else {
                                item.classList.remove('background-mask');
                            }
                        });
                        getStorageInfo(option.innerText);
                        leaveOption();
                    }
                    option.style.backgroundImage = 'url(' + data[i].icon + ')';
                    storage.appendChild(option);
                }
            }).catch(error => {
                console.error(error);
            });
        }
        getStorageList();
        function leaveOption() {
            let option = document.getElementById('option');
            option.style.display = 'none';
            let svg = document.getElementsByClassName('s-icon')[0];
            svg.style.transform = 'rotate(0deg)';
            flag = false;
        }
        function overOption() {
            let option = document.getElementById('option');
            option.style.display = 'block';
            let svg = document.getElementsByClassName('s-icon')[0];
            svg.style.transform = 'rotate(180deg)';
            flag = true;
        }
        function showOption() {
            if (flag) {
                leaveOption();
            } else {
                overOption();
            }
        }
        function getStorageInfo(storageName) {
            let storage = '';
            for (let i = 0; i < storageList.length; i++) {
                if (storageList[i].storageName === storageName) {
                    storage = storageList[i].storage;
                }
            }
            axios.get('http://localhost:8000/storage/getStorageInfo', {
                params: {
                    storage: storage
                }
            }).then(res => {
                const {data} = res.data;
                let select = document.getElementById('select');
                let input = select.getElementsByTagName('input')[0];
                input.value = data.storageName;
                select.style.backgroundImage = 'url(' + data.icon + ')';
            });
            document.onclick = function (event) {
                const e = event || window.event;
                let target = e.target || e.srcElement;
                // 方法一
                // while(target)
                // {
                //     if(target.id === "box")  // 这里就是除这个id外点击其他地方执行下面HiddenDiv方法
                //     {
                //         return;
                //     }
                //     target = target.parentNode;
                // }
                // leaveOption();
                // 方法二 如果你的目标浏览器支持ES6及以上，可以使用 Element.closest() 方法来简化代码。这个方法会沿DOM树向上遍历，直到找到匹配给定选择器的元素。
                if (!target.closest('#box')) {
                    leaveOption();
                }
                // 方法三 使用 Node.contains() 来检查点击事件是否发生在 box 或其子元素上。
                // let box = document.getElementById('box');
                // if (box && !box.contains(target)) {
                //     leaveOption();
                // }

            }
            // 方法四 使用 addEventListener 来添加事件监听器而不是直接在 document 对象上设置 onclick 属性。
            // document.addEventListener('click', function (event) {
            //     const target = event.target;
            //     if (!target.closest('#box')) {
            //         leaveOption();
            //     }
            // });
        }
    </script>
</div>
</body>
</html>